<template>
    <div class="userEdit">
        <el-dialog title="菜单添加" :visible.sync="dish_add" width="30%" :before-close="handleClose">
            <span slot="footer" class="dialog-footer">
                <div class="form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="菜名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="信息" prop="description">
                            <el-input v-model="ruleForm.description"></el-input>
                        </el-form-item>
                        <el-form-item label="分类" prop="categoryId">
                            <el-input v-model="ruleForm.categoryId"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品图片上传" prop="sex">
                            <div style="width: 50px;height: 50px;">
                                <el-upload class="upload-demo" action="/api/admin/upload"
                                :headers="headers"
                                 ref="upload"
                                 method="POST"
                                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                                    :on-success="FileReturn"
                                    multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                                    <el-button size="small" type="primary" @click="Upload">点击上传</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { METHOD, request } from '@/utils/request'
import { Message } from 'element-ui'
export default {
  name: 'dishEditView',
  props: {
    dish_add: {
      type: Boolean,
      default: false
    }

  },
  watch: {
    // dialogInfo: {
    //   handler (newVal, oldVal) {
    //     this.ruleForm = Object.assign({
    //       name: newVal.name,
    //       price: newVal.price,
    //       description: newVal.description,
    //       id: newVal.id
    //     })
    //     // console.log(newVal, oldVal)
    //   }
    // }
  },
  data () {
    return {
      ruleForm: {
        name: '',
        price: '',
        description: '',
        categoryId: '',
        image: ''
      },
      headers: {
        Token: sessionStorage.getItem('token')
      },
      rules: {
        name: [
          { required: true, message: '请输入菜名', trigger: 'blur' },
          { min: 0, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入信息', trigger: 'blur' },
          { min: 0, max: 11, message: '号码不合法', trigger: 'blur' }
        ]
        // sex: [
        //   { type: 'array', required: true, message: '请选择性别', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:dish_add', false)
    },
    add (params) {
      request('/api/admin/dish', METHOD.POST, params).then((resp) => {
        if (resp === 200) {
          Message({
            message: '添加成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this.$parent.query()
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('update:dish_add', false)
          //   this.$emit('update:dialogInfo', this.ruleForm)
          this.add(this.ruleForm)
          this.nextTick(this.$parent.query)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    FileReturn (resp, file, fileList) {
      this.ruleForm.image = resp.data
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
  <style>
